<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{main::head}">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container-fluid">
    <form class="row g-3" th:object="${question}">
        <div class="col-12">
            <label class="form-label">题面</label>
            <textarea class="form-control" rows="5" name="question_face" th:value="*{question_face}"></textarea>
        </div>
        <div class="col-md-6">
            <label class="form-label">题目类型</label>
            <select class="form-select" name="type">
                <option selected th:selected="(*{type} == 1)" value="1">单选题</option>
                <option th:selected="(*{type} == 2)" value="2">多选题</option>
                <option th:selected="(*{type} == 3)" value="3">判断题</option>
                <option th:selected="(*{type} == 4)" value="4">填空题</option>
                <option th:selected="(*{type} == 5)" value="5">简答题</option>
            </select>
            <button class="btn btn-secondary"
                    onclick="document.getElementById('a').appendChild(document.getElementById('s').cloneNode(true));
                    return false">
                添加选项
            </button>
        </div>
        <div class="row">
            <th:block th:each="s:*{selections}">
                <div class="col-md-2">
                    <label class="form-label">选项</label>
                    <input type="text" class="form-control" placeholder="ABC。。" th:value="${s.the_selection}">
                </div>
                <div class="col-md-6">
                    <label class="form-label">选项内容</label>
                    <input type="text" class="form-control" th:value="${s.the_content}">
                </div>
            </th:block>
        </div>
        <div class="row">
            <div class="container-fluid" id="a">
                <div class="row" id="s">
                    <div class="col-md-2" id="s1">
                        <input type="text" class="form-control" placeholder="选项" name="selection">
                    </div>
                    <div class="col-md-6" id="s2">
                        <input type="text" class="form-control " placeholder="选项内容" name="content">

                    </div>
                    <div class="col-md-1" id="s3">
                        <button class="btn btn-danger form-control"
                                onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);return false;">
                            删除
                        </button>
                    </div>
                </div>

            </div>

            <div class="col-md-6">
                <label class="form-label">设置答案</label>
                <input type="text" class="form-control" name="answer" th:value="*{answer}">
            </div>
            <div class="col-12">
                <button type="submit" class="btn btn-primary" th:if="*{id_question}"
                        onclick="form.action='change-a-question';form.submit();">保存
                </button>
                <button type="submit" class="btn btn-primary" onclick="form.action='add-a-question';form.submit();">
                    保存为新题目
                </button>
                <button type="reset" class="btn btn-secondary">重置</button>

            </div>
    </form>

</div>

</body>
</html>